import React from 'react'
import { useLocation, useNavigate, } from 'react-router-dom'
import { Toast, NavBar } from 'react-vant';
import { WeappNav } from '@react-vant/icons';
import { useDispatch, useSelector } from 'react-redux'
import { LISTITEM, ALLSTATETYPE, SETFOCUS } from '../types/store.d'

interface locationType {
    state: LISTITEM
}

export default function Detile() {
    const location = useLocation() as locationType
    const dispatch = useDispatch()
    const focusList = useSelector((state: ALLSTATETYPE) => {
        return state.focus
    })

    console.log(focusList, 'focusList')
    const navigate = useNavigate()
    const { title,  img, id } = location.state
    const handlefocus = (data: LISTITEM) => {
        dispatch({
            type: SETFOCUS,
            payload: data.id 
        })
    }
    return (
        <div>
            <NavBar
                rightText={<WeappNav fontSize={20} />}
                onClickLeft={() => navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />
            <div >
                <h2>{title}</h2>
                <img  src={img} alt="" />
                <div  onClick={() => handlefocus(location.state)} >
                    {
                        focusList.includes(location.state.id) ? '已关注' : '+关注'
                    }
                </div>
       
            </div>
        </div>
    )
}
